Sama seperti posting yang dahulu, sekarang saya akan membahas lagi tentang menu horizontal. Tapi menu horizontal kali ini berbeda dari menu horizontal yang dulu saya posting. Menu horizontal kali ini dapat dropdown. Maksudnya jika kursor kita didekatkan pada teks yang berada di menu navigasi, maka nanti akan muncul seperti daftar menu lagi dibawahnya. Contohnya bisa diliat dibawah ini :
Untuk membuat menu seperti diatas, berikut langkah-langkahnya :
1. Login ke blogger anda
2. KLik rancangan
3. KLik edit html
4. Cari kode
]]></b:skin>
5.Diatas kode
]]></b:skin> , pastekan kode berikut :
menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
6. Simpan template
7. Kemudian klik elemen laman
8. Klik tambah gadget dan isikan dengan kode dibawah ini :
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Windows Tricks</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Microsoft Excel</a></li>
<li><a href="#">Microsoft Word</a></li>
<li><a href="#">Data recovery</a></li>
<li><a href="#">Antivirus</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Blog Tips</a></li>
<li><a href="#">SEO Tips</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
<li><a href="#">Phone Tips</a>
<ul>
<li><a href="#">Phone Secret Codes</a></li>
<li><a href="#">Phone Screenshot</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Panduan SEO</a></li>
</ul>
</li>
<li><a href="#">ArcGIS Tutorial</a></li>
<li><a href="#">Free Translator</a></li>
<li><a href="#">Link Exchange</a></li>
</ul>
</div>
Ganti kode '#' dengan url target anda
Kemudian ganti home,tutorial,dan sebagainya dengan teks yang akan tampil di menu navigasi anda
SEMOGA BERHASIL ! !
